<template>
    <div class="item-box">
        <div class="product"  :key="id">
            <img :src="baseURL + path" alt="">
            <div class="rig">
                <div class="title">{{ title }}</div>
                <p class="wish">{{ wish }}</p>
                <p class="price">￥{{ price }}</p>
                <van-button @click="addCart(it)">
                        加入购物车
                </van-button>
            </div>
        </div>
    </div>
</template> 

<script lang="ts" setup>
import { showToast } from 'vant';
import { addProductApi } from '../../../apis/cartApis';
import { useCommonStore } from '../../../store';
import { userAddressApi } from '../../../apis/addressApis';
import { Ref, ref } from 'vue';
const baseURL = window.baseURL;
type ListInf = { 
    id:String,
    price:String,
    title:String,
    wish:String,
    path:String,
    it:Object
}
defineProps<ListInf>();
// const props = defineProps({
//     id:String,
//     price:String,
//     title:String,
//     wish:String,
//     path:String,
//     it:Object
// })
// 获取我的收获地址数据
const uid:string = useCommonStore().userInfo.id
const address:Ref = ref('')
const id:Ref = ref('')
getAddressList()
async function getAddressList(){
  let _res = await userAddressApi(uid)
  if(_res.code === 200){
    address.value = _res.data[0].address
    id.value = _res.data[0].phone
  }
}

// 添加到购物车 
async function addCart(it:any){
    let _res = await addProductApi({
        userId: id.value,
        id:it.id,
        price:it.price,
        time:Date.now(),
        count:'1',
        name:it.title,
        detailaddress:address.value,
        bgUrl:it.path
    })
    if(_res.code === 200){
        showToast('添加购物车成功！')
    }
    
}
</script>

<style lang="less" scoped>
@import url('../../../style/comon.less');
.item-box{
    display: block;
    width: 100vw;
    .product{
        position: relative;
        display: flex;
        margin: 16px 6px;
        background-color: #fff;
        border-radius: .5rem;
        box-shadow:  0 0 10px @g3;
            img{
                width: 30vw;
                margin-right: 10px;
                background-color: #fff;
            }
            .rig{
                padding-left: 4px;
                padding-top: .6rem;
                border-radius: .4rem;
            }
            .title{
                min-height: 1.2rem;
                font-size: .75rem;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                display: -webkit-box;
            }
            .price{
                margin-top: .4rem;
                font-size: .8rem;
                color: @b1;
            }
            .wish{
                margin-top: .5rem;
                font-size: .6rem;
                color: gray;
            }
            &::v-deep .van-button{
                    position: absolute;
                    width: 4.5rem;
                    height: 32px;
                    background-color: @g3;
                    color: rgb(126, 126, 126);
                    right: 1rem;
                    bottom: -.5rem;
                    margin-top: 10px;
                    margin-bottom: 20px;
                    border: none;
                    font-size: .6rem;
                }

    }
}
</style>